<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瞎了狗眼，原来你是这样的人_招商信诺</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/swiper.css"/>
    <link rel="stylesheet" href="css/test.css"/>
    <script type="text/javascript">
        ;(function()
        {
            function resize()
            {
                var docEl = document.documentElement;
                var clientWidth = docEl.clientWidth < 750 ? docEl.clientWidth : 750;
                if (!clientWidth) return;
                docEl.style.fontSize = Math.floor(100 * (clientWidth / 750)) + 'px';
            }

            if('onorientationchange' in window) window.addEventListener('onorientationchange', resize, false);
            window.addEventListener('resize', resize, false);
            document.addEventListener('DOMContentLoaded', resize, false);
        })();
    </script>
</head>
<body>
<div id="main">
    <img src="img/loading.gif" alt="" id="loading" style=""/>
    <div id="mask">
        <div id="mask-content">
            <img src="img/mask-img.png" id="mask-img" alt=""/>
            <img src="img/exit.png" alt="" id="exit" onclick="hideMask();"/>
            <div id="mask-text">
                <img src="img/mask-text1.png" alt="" id="mask-text1"/>
                <div style="margin-top: -.5rem;">
                    <img src="img/mask-text2.png" alt=""/>
                    <span id="unfinish-number"></span>
                    <img src="img/mask-text3.png" alt=""/>
                </div>
            </div>
        </div>

    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide overflow-hide">
                <img src="img/back-img.png" class="slide-img" alt="" width="100%" height="100%"/>
                <img src="img/slide-title.png" id="slide-title" alt=""/>
                <div id="test1" class="test-item back-img" style="background-image: url('img/test1.png')">
                    <input type="number" id="input-age" placeholder="请输入你的年龄"  oninput="judgeAge()"/>
                </div>
                <div id="test2" class="test-item back-img" style="background-image: url('img/test2.png')">
                    <div id="test2-select-wrap" class="select-wrap">
                        <div id="man" class="test2-item" data-sex="1">
                            <img src="img/choose.png" alt="" class="choose"/>
                            <img src="img/man.png" alt="" class="sex"/>
                        </div>
                        <div id="woman" class="test2-item" data-sex="0">
                            <img src="img/choose.png" alt="" class="choose"/>
                            <img src="img/woman.png" alt="" class="sex"/>
                        </div>

                    </div>
                </div>
                <div id="test3" class="test-item back-img" style="background-image: url('img/test3.png')">
                    <div id="test3-select-wrap" class="test-select-wrap">
                        <img src="img/test3/text1.png" alt="" class="text text1"/>
                        <div class="progress selected" data-index="3" id="test3-progress" data-select="0"></div>
                        <img src="img/test3/text2.png" alt="" class="text text2"/>
                    </div>
                </div>
            </div>
            <div class="swiper-slide overflow-hide">
                <img src="img/back-img.png" class="slide-img" alt="" width="100%" height="100%"/>
                <div id="test4" class="test-item back-img" style="background-image: url('img/test4.png')">
                    <div id="test4-select-wrap" class="test-select-wrap">
                        <img src="img/test4/text1.png" alt="" class="text text1"/>
                        <div class="progress progress-other" data-index="4" data-select="1"></div>
                        <img src="img/test4/text2.png" alt="" class="text text2"/>
                        <img src="" alt="" class="status"/>
                    </div>
                </div>
                <div id="test5" class="test-item back-img" style="background-image: url('img/test5.png')">
                    <div id="test5-select-wrap" class="test-select-wrap">
                        <img src="img/test5/text1.png" alt="" class="text text1"/>
                        <div class="progress progress-other selected" data-index="5" data-select="1"></div>
                        <img src="img/test5/text2.png" alt="" class="text text2"/>
                        <img src="" alt="" class="status"/>
                    </div>
                </div>
                <div id="test6" class="test-item back-img" style="background-image: url('img/test6.png')">
                    <div id="test6-select-wrap" class="test-select-wrap">
                        <img src="img/test6/text1.png" alt="" class="text text1"/>
                        <div class="progress progress-other selected" data-index="6" data-select="1"></div>
                        <img src="img/test6/text2.png" alt="" class="text text2"/>
                        <img src="" alt="" class="status"/>
                    </div>
                </div>
            </div>
            <div class="swiper-slide overflow-hide">
                <img src="img/back-img.png" class="slide-img" alt="" width="100%" height="100%"/>
                <div id="test7" class="test-item back-img" style="background-image: url('img/test7.png')">
                    <div id="test7-select-wrap" class="test-select-wrap">
                        <img src="img/test7/text1.png" alt="" class="text text1"/>
                        <div class="progress progress-other selected" data-index="7" data-select="1"></div>
                        <img src="img/test7/text2.png" alt="" class="text text2"/>
                        <img src="" alt="" class="status"/>
                    </div>
                </div>
                <div id="test8" class="test-item back-img" style="background-image: url('img/test8.png')">
                    <div id="test8-select-wrap" class="test-select-wrap">
                        <img src="img/test8/text1.png" alt="" class="text text1"/>
                        <div class="progress progress-other selected" data-index="8" data-select="1"></div>
                        <img src="img/test8/text2.png" alt="" class="text text2"/>
                        <img src="" alt="" class="status"/>
                    </div>
                </div>
                <div id="test9" class="test-item back-img" style="background-image: url('img/test9.png')">
                    <div id="test9-select-wrap" class="test-select-wrap">
                        <img src="img/test9/text1.png" alt="" class="text text1"/>
                        <div class="progress progress-other selected" data-index="9" data-select="1"></div>
                        <img src="img/test9/text2.png" alt="" class="text text2"/>
                        <img src="" alt="" class="status"/>
                    </div>
                </div>
            </div>
            <div class="swiper-slide overflow-hide">
                <div id="lastSlide">
                    <img src="img/back-img.png" class="slide-img" alt="" width="100%" height="100%" id="lastBack"/>
                    <div id="test10" class="test-item back-img" style="background-image: url('img/test10.png')">
                        <div id="test10-select-wrap" class="test-select-wrap">
                            <img src="img/test10/text1.png" alt="" class="text text1"/>
                            <div class="progress progress-other selected" data-index="10" data-select="1"></div>
                            <img src="img/test10/text2.png" alt="" class="text text2"/>
                            <img src="" alt="" class="status"/>
                        </div>
                    </div>
                    <div id="test11" class="test-item back-img" style="background-image: url('img/test11.png')">
                        <div id="test11-select-wrap" class="test-select-wrap">
                            <img src="img/test11/text1.png" alt="" class="text text1"/>
                            <div class="progress progress-other selected" data-index="11" data-select="1"></div>
                            <img src="img/test11/text2.png" alt="" class="text text2"/>
                            <img src="" alt="" class="status"/>
                        </div>
                    </div>
                    <div id="test12" class="test-item back-img" style="background-image: url('img/test12.png')">
                        <div id="test12-select-wrap" class="test-select-wrap">
                            <img src="img/test12/text1.png" alt="" class="text text1"/>
                            <div class="progress progress-other selected" data-index="12" data-select="1"></div>
                            <img src="img/test12/text2.png" alt="" class="text text2"/>
                            <img src="" alt="" class="status"/>
                        </div>
                    </div>
                    <div id="test13" class="test-item back-img" style="background-image: url('img/test13.png')">
                        <div id="test13-select-wrap" class="test-select-wrap">
                            <img src="img/test13/text1.png" alt="" class="text text1"/>
                            <div class="progress progress-other selected" data-index="13" data-select="1"></div>
                            <img src="img/test13/text2.png" alt="" class="text text2"/>
                            <img src="" alt="" class="status"/>
                        </div>
                    </div>
                    <a href="javascript:submitAction();">
                        <img src="img/btn-submit.png" alt="" id="submit-img"/>
                    </a>
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
            <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet"></span>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript">

    $(function()
    {
        document.onreadystatechange = function () {
            if (document.readyState == "complete") {
                $('#loading').hide();
            }
        }

        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            direction: 'vertical',
//          autoplay: 600,
            speed:200

        });

        var startScroll, touchStart, touchCurrent;
        swiper.slides.on('touchstart', function (e) {
            startScroll = this.scrollTop;
            touchStart = e.targetTouches[0].pageY;
        }, true);
        swiper.slides.on('touchmove', function (e) {
            touchCurrent = e.targetTouches[0].pageY;
            var touchesDiff = touchCurrent - touchStart;
            var slide = this;
            var onlyScrolling =
                    ( slide.scrollHeight > slide.offsetHeight ) && //allow only when slide is scrollable
                    (
                            ( touchesDiff < 0 && startScroll === 0 ) || //start from top edge to scroll bottom
                            ( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) || //start from bottom edge to scroll top
                            ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) ) //start from the middle
                    );
            if (onlyScrolling) {
                e.stopPropagation();
            }
        }, true);

        $( ".progress-other" ).slider({
            orientation: "horizontal",
            range: "min",
            max: 100,
            value: 0,
            change: refreshSwatch
        });
        $( "#test3-progress" ).slider({
            orientation: "horizontal",
            range: "min",
            max: 100,
            value: 0,
            change: refreshSwatch3
        });


    });

    function refreshSwatch()
    {
        var _this=$(this);
        var idx=_this.attr('data-index');
        var status=_this.slider("value");
        _this.find('.ui-slider-handle').addClass('select');
        if(status>0&&status<10)
        {
            _this.slider('value',0);
            _this.siblings('.status').attr({
                'src':'',
                'class':'status'
            });
        }
        else if(status>10&&status<25)
        {
            _this.slider('value',25);
            _this.siblings('.status').attr({
                'src':'img/test'+idx+'/status1.png',
                'class':'status status1'
            });
        }
        else if(status>25&&status<50)
        {
            _this.slider('value',50);
            _this.siblings('.status').attr({
                'src':'img/test'+idx+'/status2.png',
                'class':'status status2'
            });
        }
        else if(status>50&&status<75)
        {
            _this.slider('value',75);
            _this.siblings('.status').attr({
                'src':'img/test'+idx+'/status3.png',
                'class':'status status3'
            });
        }
        else if(status>75&&status<100)
        {
            _this.slider('value',100);
            _this.siblings('.status').attr({
                'src':'',
                'class':'status'
            });
        }
        switch (status)
        {
            case 0:
                _this.attr('data-select',1);
                break;
            case 25:
                _this.attr('data-select',2);
                break;
            case 50:
                _this.attr('data-select',3);
                break;
            case 75:
                _this.attr('data-select',4);
                break;
            case 100:
                _this.attr('data-select',5);
                break;
            default :break;
        }

    }

    function refreshSwatch3()
    {
        var _this=$(this);
        var status=_this.slider("value");
        _this.find('.ui-slider-handle').addClass('select');
        if(status>0&&status<50)
        {
            _this.slider('value',0);
            _this.siblings('.status').attr({
                'src':'',
                'class':'status'
            });
            _this.attr('data-select',0);
        }
        if(status>50&&status<100)
        {
            _this.slider('value',100);
            _this.siblings('.status').attr({
                'src':'img/test3/status1.png',
                'class':'status status1'
            });
            _this.attr('data-select',1);
        }
        switch (status)
        {
            case 0:
                _this.attr('data-select',0);
                break;
            case 100:
                _this.attr('data-select',1);
                break;
            default :break;
        }
    }

   //click  touchstart
    var sex;
    $('#test2-select-wrap').on('click','.test2-item',function()
    {
        var choose=$(this).find('.choose');
        if(choose.attr('src')==='img/choose.png')
        {
            choose.attr('src','img/chooseing.png');
            $(this).siblings('.test2-item').find('.choose').attr('src','img/choose.png');
        }
        else
        {
            choose.attr('src','img/choose.png');
        }
        sex=$(this).attr('data-sex');
    });

    var question={};
    function submitAction()
    {   
    	question={};
        var unfinish=0;
        var isChooseSex=false;
        $('.choose').each(function()
        {
            if($(this).attr('src')==='img/chooseing.png')
            {
                isChooseSex=true;
            }
        });
        if(!isChooseSex)
        {
            unfinish++;
        }
        $('.ui-slider-handle').each(function()
        {
            var img=$(this).css('background-image');
            if(img.match('white'))
            {
                unfinish++;
            }
        });
        if($('#input-age').val()==""){  
        	unfinish++;
        	$('#mask').show(); 
        }
        if(unfinish>0 )
        {
            $('#unfinish-number').html(unfinish);
            $('#mask').show();
        }
        else
        {
            var age=parseInt($('#input-age').val());
            if(age<21)
            {
                var stage=1;
            }
            else if(age>20&&age<26)
            {
                var stage=2;
            }
            else if(age>25&&age<31)
            {
                var stage=3;
            }
            else if(age>30&&age<41)
            {
                var stage=4;
            }
            else if(age>40&&age<51)
            {
                var stage=5;
            }
            else if(age>50&&age<61)
            {
                var stage=6;
            }
            else if(age>60)
            {
                var stage=7;
            }
            question['q1']=age;
            question['q2']=sex;
            question['q3']=$('#test4-select-wrap .progress').attr('data-select');
            for(var i=0;i<10;i++)
            {
                var result=$('.selected').eq(i).attr('data-select');
                question['q'+(i+4)]=result;
            }
            
           question = JSON.stringify(question);
            
            $.ajax({
                url:'/ajax.php?a=get_answer',
                type:'post',		
                data:{question:question},
                contentType:'application/x-www-form-urlencoded',
                dataType: 'json',
                success:function(data)
                {
                    /*{"code":1,
                            "result":"\u7cbe\u660e\u6295\u8d44\u8005",
                            "mark":"0d4d1a3c53bc98076671411ba3007d03",
                            "msg":"\u63d0\u4ea4\u6210\u529f\uff01",
                            "title":"\u5341\u4e94\u5e74\u671f\u5b9a\u671f\u5bff\u9669",
                            "score":95,
                            "url":"\/product\/shiwunianqi.html",
                            "content":"\u60a8\u7684\u5e74\u7ec8\u8bc4\u5206\u4e3a95,\u5f53\u503c\u65e0\u6127\u662f\u4e2a\u7cbe\u660e\u6295\u8d44\u8005\uff01\u7cbe\u660e\u5982\u4f60,\u9009\u62e9\u4e00\u4efd\u5341\u4e94\u5e74\u671f\u5b9a\u671f\u5bff\u9669\uff0c\u751f\u547d\u4fdd\u969c\u52a0\u5b9a\u671f\u9ad8\u989d\u8fd4\u8fd8\uff0c15\u5e74\u8d85\u957f\u4fdd\u62a4\uff01\u5237\u7206\u5e74\u7ec8KPI\uff01\uff01"
                    }*/
                    if(data.code==1)
                    {
                    	setCookie('url',data.murl);
                    	setCookie('score',data.score);
                    	setCookie('content',"1");
                    	setCookie('title',data.title);
                    	setCookie('result',data.result);
                    	setCookie('mark',data.mark);
                    	setCookie('sex',sex);
                        location.href='investment.html?result='+data.result+'&score='+data.score+'&mark='+data.mark;
                    }

                },
                error: function()
                {
                    alert('系统繁忙，请稍后重试！');
                }

            });
            //
        }
    }

    function hideMask()
    {
        $('#mask').hide();
    }

    function judgeAge()
    {
        var age=$('#input-age').val();
        if(age.length>2) $('#input-age').val(age.slice(0,2));
        if(age==0) $('#input-age').val('');
    }

    function setCookie(name,value)
    {
        var Days = 1;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    } 

</script>
</body>
</html>